<template>
  <div class="visitor-stats-panel">
    <div class="main-stat">
      <span class="value">{{ animatedInside }}</span>
      <span class="label">当前在园人数</span>
    </div>
    <div class="sub-stats">
      <div class="stat-card">
        <span class="value">{{ animatedLeftToday }}</span>
        <span class="label">今日已离园</span>
      </div>
      <div class="stat-card">
        <span class="value">{{ animatedTotal }}</span>
        <span class="label">注册访客</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';
import { useCountUp } from '@/composables/useCountUp';

const props = defineProps({
  stats: {
    type: Object,
    required: true,
    default: () => ({ total: 0, inside: 0, left_today: 0 }),
  },
});

const animatedInside = useCountUp(() => props.stats.inside || 0);
const animatedLeftToday = useCountUp(() => props.stats.left_today || 0);
const animatedTotal = useCountUp(() => props.stats.total || 0);
</script>

<style scoped>
.visitor-stats-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}
.main-stat {
  text-align: center;
  margin-bottom: 15px;
}
.main-stat .value {
  font-size: 28px;
  color: #00e5ff;
  font-weight: bold;
  display: block;
}
.main-stat .label {
  font-size: 16px;
  color: #aed4ff;
}
.sub-stats {
  display: flex;
  justify-content: space-around;
  gap: 15px;
}
.stat-card {
  background: rgba(0, 162, 255, 0.1);
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  flex: 1;
}
.stat-card .value {
  display: block;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
.stat-card .label {
  display: block;
  font-size: 14px;
  color: #aed4ff;
  margin-top: 5px;
}
</style> 